<template>
  <Header />
  <Main :list="messageList" />
  <Footer @send="sendMessage" />
</template>

<script setup lang="ts">
import Header from '@/visitor/components/Header.vue'
import Main from '@/visitor/components/Main.vue'
import Footer from '@/visitor/components/Footer.vue'
import bridge from '@/common/bridge'
import { ReceiveMessageType } from '@/common/constants'
import { getVisitorData } from '@/visitor/api'
import { useMessage, useService, useVisitor } from '@/visitor/utils'

const { visitorData, setVisitorData } = useVisitor()

const { serviceData, setServiceData } = useService()

const { messageList, sendMessage } = useMessage(visitorData, serviceData)

bridge.ready(async () => {
  const data = await getVisitorData()
  setVisitorData(data)
})

bridge.receiveMessage(ReceiveMessageType.REGISTER, (data) => {
  const { customerServiceCode: userId, customerServiceImage: userAvatar } = data
  setServiceData({
    userId,
    userName: '',
    userAvatar
  })
})
</script>

<style scoped></style>
